<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :leftText="scrollTop>0?'景点详情':''" :navbarType='scrollTop>0?0:5'>
          <view slot="right">
            <view  class="wlkflex like-box" >
              <uni-icons class="mr20" type="redo" :color="scrollTop>0?'#333':'#FFFFFF'" size="28" @click="showShare=true"></uni-icons>
              <uni-icons @click="likeFun" v-if="ticket.user_like==0" type="heart" size="28" :color="scrollTop>0?'#333':'#FFFFFF'"></uni-icons>
              <uni-icons @click="likeFun" v-else type="heart-filled" size="28" :color="themeColor"></uni-icons>
            </view>
          </view>
        </wlk-navbar>
    <wlk-canvas mode="ticket" :item="ticket" :qrcode="qrcode" ref="childComponent"></wlk-canvas>
    <block v-if="!loading">
          <view class="relative">
            <image lazy-load class="block wd100 poster" mode="aspectFill" :src="ticket.images[0]"></image>
            <view class="custom-album wlkflex justify-center">
              <view class="album-box">
                <u-album  @albumWidth="albumWidth" :urls="ticket.images" keyName="url" multipleSize="50" singleSize="50" maxCount="4" space="30" rowCount="4"></u-album>

              </view>

            </view>
            <view class="video wlkflex justify-center" v-if="ticket.video" @click="showVideo=true">
               <u-icon name="play-right-fill" size="35" color="#FFFFFF"></u-icon>
            </view>
          </view>
          <view class="ticket-content">
             <view class="pd030 mt30">
               <view class="bgw pd30 br08">
                 <view class="ticket-title bold">{{ticket.title}}</view>
                 <view class="ticket-desc mt15">{{ticket.desc}}</view>
                 <view class="wlkflex justify-between mt05">
                   <view class="wlkflex tags wrap">
                     <view class="tags-item" v-for="(tag,i) in ticket.tags" v-if="i<10">
                       <u-tag :text="tag" size="mini" type="info" bgColor="#F9F9F9" color="#999" borderColor="#F3F3F3"></u-tag>
                     </view>

                   </view>
                   <view class="sales">
                     {{ticket.sales}}销量
                   </view>
                 </view>
               </view>

               <view class="relative bgw pd030 br08 mt30 mb30">
                 <image mode="widthFix"  :src="images.mapBg" class="wd100 mapBg"></image>
                 <view class="map-box wlkflex justify-between">
                   <view class="left">
                     <view class="wlkflex address">
                       <uni-icons type="location" size="18" :color="themeColor"></uni-icons>
                       <text class="info ml10">{{ticket.address}}</text>
                     </view>
                     <view class="mt05 distance" v-if="ticket.distance>0">
                       距离您 <text class="ml05 mr05">{{ticket.distance}}</text> km
                     </view>
                   </view>
                   <view class="right wlkflex justify-end">
                     <view class="btn-map wlkflex justify-center" :style="{backgroundColor:bgColor}" @click="toMap(ticket.lat,ticket.lng,ticket.name,ticket.address)">
                       <uni-icons type="paperplane-filled" :color="themeColor" size="25"></uni-icons>
                     </view>
                   </view>
                 </view>
               </view>

               <view class="content-tabs">
                 <u-tabs
                     :activeStyle="{
                        color: themeColor,
                        fontSize: '28rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)',
                        backgroundColor: '#fff',
                        borderRadius: '8px',
                        padding:'20rpx 20rpx 20rpx 20rpx',
                        transition: 'all 0.3s ease',

                    }"
                     :itemStyle="{
                         alignItems:'flex-start',
                         padding:'10rpx 20rpx 10rpx  5rpx',
                    }"
                     :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        transform: 'scale(1)',
                        borderRadius: '8px',
                        transition: 'all 0.3s ease',
                        padding:'20rpx 20rpx 20rpx 20rpx',
                    }"
                     :list="ticket.suitList"
                     lineWidth="0"
                     lineHeight="0"
                     :current="suitCurrent"
                     :lineColor="themeColor"
                     keyName="typeName"
                     @change="changeSuitTab"
                 ></u-tabs>
               </view>
               <view class="bgw pd30 br08 mt30 mb30" v-if="!$u.test.isEmpty(ticket.suitList)">
                 <view class="suit-list mb20 wlkflex justify-between" v-for="(suit,index) in ticket.suitList[suitCurrent].children">
                   <view class="suit-left">
                     <view class="suit-title">{{suit.name}}</view>
                     <view class="wlkflex">
                       <view class="suit-tag"  v-for="(tag,i) in suit.tags" v-if="i<3">
                         <u-tag :text="tag" plain size="mini" type="warning"></u-tag>
                       </view>
                     </view>
                     <view class="wlkflex suit-desc mt05 justify-between">
                       <view>{{suit.before>0?'提早'+suit.before+'天'+suit.beforetime+'前预订门票':'可订今日票'+suit.beforetime+'前预订'}}</view>
                       <view class="wlkflex" @click="setTip(suit)">
                         <view>订票须知</view>
                         <uni-icons type="right" size="12" color="#999"></uni-icons>
                       </view>
                     </view>
                   </view>
                   <view class="suit-right">
                     <view class="original">&yen;<text class="ml05 ">{{ suit.price }}</text>起</view>
                     <view class="price">&yen;<text class="ml05 num bold">{{ suit.minprice>0?suit.minprice:0 }}</text><text class="col9">起</text></view>
                     <view class="wlkflex justify-end" v-if="!$u.test.isEmpty(suit.priceList)">
                       <view class="buy-btn center" :style="{background:linearColor}" @click="jump(suit)">预订</view>
                     </view>
                     <view class="wlkflex justify-end" v-else>
                       <view class="buy-btn-not center">售罄</view>
                     </view>

                   </view>
                 </view>


               </view>
             </view>
            <wlk-sticky :scrollTop="scrollTop" @returnParams="handleEndReturnParams" :offsetTop="offsetTop" :borderHeight="borderHeight">
              <view class="content-tabs pd030">
                <u-tabs
                    :activeStyle="{
                        color: themeColor,
                        fontSize: '28rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)',
                        backgroundColor: '#fff',
                        borderRadius: '8px',
                        padding:'20rpx 20rpx 20rpx 20rpx',
                        transition: 'all 0.3s ease',

                    }"
                    :itemStyle="{
                         alignItems:'flex-start',
                         padding:'10rpx 20rpx 10rpx  5rpx',
                    }"
                    :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        transform: 'scale(1)',
                        borderRadius: '8px',
                        transition: 'all 0.3s ease',
                        padding:'20rpx 20rpx 20rpx 20rpx',
                    }"
                    :list="ticket.contentList"
                    lineWidth="0"
                    lineHeight="0"
                    :current="current"
                    :lineColor="themeColor"
                    @change="changeTab"
                ></u-tabs>
              </view>
            </wlk-sticky>
          <view class="pd030">
            <view class="u-content bgw pd30 br08 mt30">
              <view v-if="ticket.contentList[current].showType == 'content'">
                <u-parse :content="ticket.contentList[current].value"></u-parse>
              </view>
              <view v-else class="content-info">
                <view class="wlkflex justify-between">
                  <view class="wlkflex">
                    <uni-icons type="notification" size="20" color="#555"></uni-icons>
                    <view class="ml10">开放时间</view>
                  </view>
                  <view class="col9">{{ticket.opentime}}</view>
                </view>
                <view class="mt20 wlkflex justify-between">
                  <view class="wlkflex">
                    <uni-icons type="phone" size="20" color="#555"></uni-icons>
                    <view class="ml10">联系电话</view>
                  </view>
                  <view class="col9">{{ticket.mobile}}</view>
                </view>
              </view>
            </view>
          </view>


          </view>
        </block>
        <u-back-top :scroll-top="scrollTop" top="400" z-index="9999" icon="arrow-up" :customStyle="{
            backgroundColor:themeColor
        }" :iconStyle="iconStyle"></u-back-top>
        <u-popup :show="showVideo" :customStyle="{width:'92%',padding:'70rpx 30rpx',display:'flex',alignItems:'center',justifyContent:'center'}" :safeAreaInsetBottom="false" round="20" @close="showVideo=false" mode="center" closeable>
            <video id="myVideo" :src="ticket.video" autoplay controls></video>
        </u-popup>
        <u-popup :show="showTip" round="20" @close="showTip=false" mode="bottom" closeable>

            <view class='tip-box pd30'>
              <view class="tip-title center">
                订票须知
              </view>
              <view class="tip-content mt20">
                <view>{{tipSuit.name}} <text class="ml05 mr05">-</text> {{tipSuit.typeName}}</view>
                <view class="wlkflex wrap">
                  <view class="tip-suit-tag mt05"  v-for="(tipTag,i) in tipSuit.tags">
                    <u-tag :text="tipTag" plain size="mini" type="warning"></u-tag>
                  </view>
                </view>
                <u-divider></u-divider>
                <scroll-view class="scroll-Y" scroll-y>
                <view class="mt30">预订时间</view>
                <view class="tip-desc">{{tipSuit.before>0?'提早'+tipSuit.before+'天'+tipSuit.beforetime+'前预订门票':'可订今日票'+tipSuit.beforetime+'前预订'}}</view>
                <view class="mt30">取票说明</view>
                <view class="tip-desc">{{tipSuit.explain}}</view>
                <view class="mt30">供应商名称</view>
                <view class="tip-desc" v-if="!$u.test.isEmpty(tipSuit)">{{tipSuit.merch.name}}</view>
                <view class="mt30">门票说明</view>
                <view v-if="!$u.test.isEmpty(tipSuit)">
                  <u-parse :content="tipSuit.content"></u-parse>
                </view>
                </scroll-view>
              </view>
            </view>
        </u-popup>
        <view class="wlkflex fixed wd100 justify-between">
          <view class="btn-left wlkflex justify-center shadow" @click="callPhone(ticket.mobile)">
            <uni-icons type="phone-filled" size="28"></uni-icons>
          </view>
          <view class="btn-right wlkflex justify-center shadow" :style="{backgroundColor:'#FFFFFF'}" @click="servicer">
            <uni-icons type="chat-filled" :color="themeColor" size="28"></uni-icons>
            <view class="ml10" :style="{color:themeColor}">企微客服</view>
          </view>
        </view>

    <u-popup safeAreaInsetBottom :customStyle="shareStyle" :show="showShare" @close="closeShare" round="20">
      <view class="share-box">
        <view class="pd30">
          <view class="center title">立即分享给好友</view>
          <view class="share-btn-info wlkflex">
            <!-- #ifdef H5 || MP-WEIXIN -->
            <block  v-if="platform=='wxMiniProgram'">
              <button open-type="share" @share='onShareAppMessage' class="wlkflex justify-center wrap" >
                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                  <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                </view>
                <view class="btn-name wd100 center mt10">微信好友</view>
              </button>
            </block>
            <block v-else-if="platform=='wxOfficialAccount'">
              <view class="wlkflex justify-center wrap" @click="showH5Share=true">
                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                  <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                </view>
                <view class="btn-name wd100 center mt10">微信好友</view>
              </view>
            </block>
            <block v-else>
              <view class="wlkflex justify-center wrap" @click="copyLink">
                <view class="icon-box wlkflex justify-center">
                  <i class="gg-link" style="color: #606266;transform: rotate(-45deg) scale(var(--ggs, 1.2));"></i>
                </view>
                <view class="btn-name wd100 center mt10">复制链接</view>
              </view>
            </block>
            <!-- #endif -->
            <view class="wlkflex justify-center wrap" @click="canvas">
              <view class="icon-box wlkflex justify-center">
                <u-icon name="photo-fill" size="32" :color="themeColor"></u-icon>
              </view>
              <view class="btn-name wd100 center mt10">分享海报</view>
            </view>
          </view>
        </view>
        <u-gap height="8" bgColor="#F9F9F9"></u-gap>
        <view class="close center" @click="closeShare">取消</view>
      </view>
    </u-popup>
    <u-overlay :show="showH5Share" @click="showH5Share = false">
      <view class="wd100 hg100">
        <image src="/static/images/other/share.png" class="share-image" mode="widthFix"></image>
      </view>
    </u-overlay>
    </view>
</template>

<script>
    import { formatRichText,makePhoneCall,copy,toUrl,toWork,rgbaToRgb,openMap,pxToRpx } from '@/wlkutils/tools';
    import platform from "@/wlkutils/platform";
    import share from "@/wlkutils/share";
    import { mapMutations,mapGetters } from 'vuex';
    var _self;
	export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','uEmpty','images','lat','lng'])
        },
		data() {
			return {
			    id:'',
        ticket:{},
        bgColor:'',
        linearColor:'',
        current:0,
        suitCurrent:0,
        showVideo:false,
        showTip:false,
        tipSuit:{},
        scrollTop:0,
        offsetTop:0,
        borderHeight:0,
        systemInfo : uni.getSystemInfoSync(),
                swiperCurrent:0,

                loading:true,
                showShare:false,
                showH5Share:false,
                indicatorStyle:{
			              bottom:'80rpx',
                    left:'30rpx'
                },
                suitIndex:0,
                priceIndex:0,
                iconStyle: {
                    color: '#FFFFFF'
                },
                shareStyle:{
                },
                platform:platform.get(),
                showCanvas:false,
                showPoster:false,
                qrcode:'',

			};
		},
		onLoad(options) {
		    _self = this;
      _self.offsetTop =pxToRpx( this.systemInfo.statusBarHeight + 44 );
            _self.id = this.$Route.query.id;
            if(_self.id>0){
                this.getData();
            }
		},
    onShow() {
      this.bgColor = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.3);
      this.linearColor = 'linear-gradient(to left,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.75)+')';

    },
    watch:{
      themeColor(val) {
        this.bgColor = uni.$u.colorToRgba(rgbaToRgb(val), 0.3);
        this.linearColor = 'linear-gradient(to left,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.75)+')';
      },
    },
        onPageScroll : function(e) {
            _self.scrollTop = e.scrollTop;
          //适用于navbar是透明5到其他模式的情况，防止吸顶时机不对
          if(!_self.isFixed){
            _self.borderHeight = e.scrollTop;
          }
        },
        onShareAppMessage(res){
            let data = new Object();
            data.title = this.ticket.title;
            data.desc = this.ticket.desc;
            data.params = {id:this.id};
            data.imageUrl = this.ticket.images[0].poster?this.ticket.images[1].url:this.ticket.images[0];
            return share.setShareInfo(data);
        },
		methods: {
      ...mapMutations(["setLoginPopupShow"]),
      async canvas(){
        if(!this.isLogin){
          this.showShare = false;
          this.setLoginPopupShow(true);
          return false;
        }
        // 渲染
        // #ifndef MP
        let params = {id:this.id};
        let shareInfo = this.initShareInfo();
        this.qrcode = shareInfo.copyLink;
        this.$refs.childComponent.canvas();
        this.showShare = false;
        // #endif
        // #ifdef MP
        let res = await uni.$u.http.post('wechat/getUnlimitedQRCode',
            {id:this.id,type:'ticket'},{custom: {hideMsg: true}}
        ).then(res => {
          _self.qrcode =  res.data;
          _self.$refs.childComponent.canvas();
          _self.showShare = false;
        })
        // #endif

      },
      copyLink(){
        let params = {id:this.id};
        let shareInfo = this.initShareInfo();
        copy(shareInfo.copyLink);
        _self.showShare = false;
      },
      closeShare(){
        this.showShare = false;
      },
      handleEndReturnParams(isFixed,fixedTop){
        this.isFixed = isFixed;
      },
      albumWidth(width){
      },
      toMap(lat,lng,name, address){
        openMap(lat,lng,name, address);
      },
      setTip(item){
        this.showTip = true;
        this.tipSuit = item ;
        if(!uni.$u.test.isEmpty(this.tipSuit.content)){
          this.tipSuit.content = formatRichText(this.tipSuit.content);
        }
      },
     changeTab(item){
         this.current = item.index
     },
      changeSuitTab(item){
        this.suitCurrent = item.index
      },
			getData() {
                _self.loading = true;
                    uni.$u.http.post('ticket/getDetail', {
                    id:_self.id,
                      lat:_self.lat,
                      lng:_self.lng,
                }).then(res => {
                    _self.ticket = res.data.ticket;
                    console.log(_self.ticket)
                    _self.initShareInfo();
                    if (_self.ticket.contentList.length>0){
                        _self.ticket.contentList.forEach(function (v,k) {
                          _self.ticket.contentList[k].value = v.value?formatRichText(v.value):'';
                        })
                    }
                    _self.loading = false;
                }).catch(res => {

                })
			},
            async likeFun(){
               let res = await uni.$u.http.post('like/setTicketLike', {id:_self.id},{custom: {load: false}}).catch((error) => {
                    uni.$u.toast(`${error.message}`)
                    return false
                });
               if (res){
                   uni.$u.toast(res.msg)
                   this.ticket.user_like =!this.ticket.user_like;
               }
            },
            callPhone(phone){
                makePhoneCall(phone);
            },
            servicer(){
                toWork(this.ticket.kf_url,this.ticket.corp_id);
            },

            initShareInfo(){
                let data = new Object();
                data.title = this.ticket.title;
                data.desc = this.ticket.desc;
                data.params = {id:this.id};
                data.imageUrl = this.ticket.images[0].poster?this.ticket.images[1].url:this.ticket.images[0];
                return share.setShareInfo(data);
            },
            jump(suit){
                let url = '/pages/ticket/before';
                if(!this.isLogin){
                    this.setLoginPopupShow(true);
                    return false;
                }else{
                    let query = {
                      ticket_id:this.ticket.id,
                      suit_id:suit.id,
                    };
                    url+=uni.$u.queryParams(query);
                    toUrl(url);
                }
            }
		},
	};
</script>

<style lang="scss">
    page{
        //background-color: #333;
        padding-bottom: 200rpx;
      .like-box{
        /*  #ifndef MP-WEIXIN */
        justify-content: right;
        /*  #endif  */
        width: 200rpx;
        /* #ifdef H5 */
        margin-right: 30rpx;
        /* #endif */
        /* #ifdef MP-WEIXIN */
        margin-right: 130rpx;
        /* #endif */
      }


        .poster{
          height: 700rpx;
          border-radius: 0 0 60rpx 60rpx;
        }
        .video{
          width: 120rpx;
          height: 120rpx;
          background:rgba(0,0,0,.5);
          border-radius: 50%;
          position: absolute;
          top: 42%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 2;
          }

        .custom-album{
          position: absolute;
          bottom: 48rpx;
          width: 100%;
          //left: 6%;

          .album-box{
            min-width: 84.3%;
            overflow: hidden;
            padding: 25rpx 38rpx;
            backdrop-filter: blur(3px) saturate(200%);
            -webkit-backdrop-filter: blur(3px) saturate(200%);
            background-color: rgba(255, 255, 255, 0.29);
            border-radius: 15px;
            img{
              border-radius: 10rpx;
            }
          }

        }
      .ticket-content{
        .ticket-title{
          font-size: $font-max;
        }
        .ticket-desc{
          font-size: $font-base;
          color: $uni-text-color-grey;
        }
        .tags{
          width: 78%;
          .tags-item{
            margin-top: 10rpx;
            margin-right: 10rpx;
          }
        }
        .sales{
          font-size: $font-sm;
          color: $-color-muted;
        }
        .mapBg{
          position: absolute;
          top: 0;
          z-index: 1;
          width: 92%;
        }
        .map-box{
          height: 180rpx;
          .left{
            width: 70%;
            .address{
              .info{
                width: 80%;
                font-size: $font-base;
              }
            }
            .distance{
              color: $uni-text-color-grey;
              font-size: $font-sm;
              margin-left: 46rpx;
            }
          }
          .right{
            position: absolute;
            right: 30rpx;
            z-index: 2;
            width: 20%;
            text-align: right;
            .btn-map{
              width: 70rpx;
              height: 70rpx;
              border-radius: 50%;
            }
          }

        }
        .suit-list{
          .suit-left{
            width: 70%;
            .suit-title{
              font-size: $font-base;
            }
            .suit-tag{
              margin-top: 10rpx;
              margin-right: 10rpx;
            }
            .suit-desc{
              font-size: $font-sm;
              color:#555;
            }
          }
          .suit-right{
            text-align: right;
            .original{
              text-decoration: line-through;
              font-size: $font-sm;
              color:$uni-text-color-grey;
            }
            .price{
              font-size: $font-sm;
              color: $-tour-price-color;
              .num{
                color: $-tour-price-color;
                font-size: $font-lg;
              }
            }
            .buy-btn{
              border-radius: 25rpx;
              padding:5rpx 0;
              width: 100rpx;
              font-size: $font-base;
              color: #FFFFFF;
            }
            .buy-btn-not{
              border-radius: 25rpx;
              padding:5rpx 0;
              width: 100rpx;
              font-size: $font-base;
              color: #999;
              background: #f9f9f9;
            }
          }
        }
        .u-content{
          .content-info{
            font-size: $font-lt;
          }
        }
        .content-tabs {
          background-color: #f9f9f9;
        }

      }
      .tip-box{
          .tip-title{
            font-size: $font-lg;
            color: $uni-text-color;
            font-weight: bold;
          }
          .tip-content{
            font-size: $font-lt;
            .tip-suit-tag{
              margin-top: 10rpx;
              margin-right: 10rpx;
            }
            .tip-desc{
              font-size: $font-base;
              color: $uni-text-color-grey;
            }
            .scroll-Y {
              max-height: 1000rpx;
            }
          }
        }
      .fixed{
        position: fixed;
        bottom: 70rpx;
        z-index: 999;
        padding: 0 30rpx;
        .btn-left{
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background-color: #FFFFFF;
        }
        .btn-right{
          width: 80%;
          height: 100rpx;
          //background-color: red;
          border-radius: 60rpx;
        }
      }


        .detail-content{
            .head-title{
                font-size: $font-lt;
                font-weight: bold;
            }
            .active-icon{
                padding: 5rpx 0rpx 0 5rpx;
                border-radius: 20px 0 0 0;
                position: absolute;
                right: 0;
                bottom: 0;
            }
            .pack{
                .pack-item{
                    min-width: 200rpx;
                    background-color: #f3f8fe;
                    margin: 10rpx;
                    height: 90rpx;
                    border: 1px solid #f3f3f3;
                    padding: 0 10rpx;
                    .name{
                        font-size: $font-lt;
                    }
                }
                .active{
                   /* border-bottom: 10rpx solid;
                    min-width: 210rpx;
                    height: 100rpx;*/
                    box-shadow:0 2px 4px rgba(0,0,0,.06);
                }
            }
            .calendar{
                .price{
                    color:$-tour-price-color;
                }
                .calendar-item{
                    width: 210rpx;
                    background-color: #f3f8fe;
                    margin: 10rpx;
                    height: 110rpx;
                    border: 1px solid #f3f3f3;
                    .name{
                        font-size: $font-base;
                    }
                }
                .active{
                   /* width: 220rpx;
                    height: 120rpx;*/
                    box-shadow:0 2px 4px rgba(0,0,0,.06);
                }
                .show-more {
                    background-color: #FFFFFF;
                    padding: 3px 0 3px 10px;
                    @include flex(column);
                    align-items: center;
                    position: absolute;
                    right: 0;
                    top: 0;
                    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
                    .text {
                        font-size: $font-sm;
                        width: 24rpx;
                        /*color: #f56c6c;*/
                        line-height: 16px;
                    }
                }
            }
            .content-title{
                padding: 30rpx;
                background-color: #FFFFFF;
                .title{
                    font-size: $font-lg;
                    font-weight: bold;
                }
                .desc{
                    font-size: $font-base;
                    color: $uni-text-color-grey;
                    margin-top: 15rpx;
                }
                .tags{
                    width: 78%;
                    .tags-item{
                        margin-top: 10rpx;
                        margin-right: 10rpx;
                    }
                }
                .sales{
                    font-size: $font-sm;
                    color: $-color-muted;
                }
                .price-info{
                    color: $-tour-price-color;
                    margin-top: 20rpx;
                    font-size: $font-lt;
                    .price{
                        font-size: 45rpx;
                    }
                }
            }
            .share-btn{
                width: 82rpx;
                height: 82rpx;
                border-radius: 50%;
                background-color: #F9F9F9;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .merch-card{
                background-color: #FFFFFF;
                padding: 30rpx 40rpx;
                .merch-info{
                    width: 70%;
                    .name{
                        font-size: $font-lt;
                        .merch-tag{
                            width: 100rpx;
                        }
                    }
                }
                .btn{
                    padding: 8rpx 30rpx;
                    border-radius: 100rpx;
                    font-size: $font-base;
                    color: #FFFFFF;
                }
            }
            .u-content{
                .route-box{
                    border-top: 2px solid;
                    .day-num{
                        border-radius: 0 0 160rpx 4px;
                        color: white;
                        display: inline-block;
                        padding: 12rpx 50rpx 12rpx 25rpx;
                        font-size: $font-lt;

                    }
                    .day-title{
                        font-size: $font-lg;
                        font-weight: bold;
                        text-align: center;
                    }
                    .step-nav{
                        padding: 30rpx 20rpx 20rpx 30rpx;
                        .step-box{
                            border-left:1px dashed #F3F3F3;
                            padding: 12rpx 0 20rpx 40rpx;
                            .icon-box{
                                width: 60rpx;
                                height: 60rpx;
                                background-color: #FFFFFF;
                                border-radius: 50%;
                                position: absolute;
                                left: -31rpx;
                                top: 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                .custom-icon{
                                    font-size: 50rpx;
                                    background-color: #FFFFFF
                                }
                            }
                            .name{
                                font-size: $font-lt;
                                font-weight: bold;
                            }
                            .desc{
                                font-size: $font-base;
                            }
                        }
                    }
                }
            }
        }
        .fixed-buy-btn{
            position: fixed;
            z-index: 999;
            padding: 20rpx 30rpx;
            background-color: #FFFFFF;
            bottom: 0;
            box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
            .other-btn{
                width: 32%;
            }
            .buy-btn{
                width: 62%;
            }
        }
        .share-box{
            .title{
                font-size: $font-base;
                color: $uni-text-color;
                padding: 10rpx;
            }
            .share-btn-info{
                margin: 50rpx 0 20rpx 0;
                button{
                    margin: 0;
                }
                .btn-name{
                    font-size: $font-sm;
                    color: $uni-text-color-grey;
                }
                .icon-box{
                    width: 95rpx;
                    height: 95rpx;
                    border-radius: 50%;
                    background-color: #F9F9F9;

                }
            }
            .close{
                line-height: 100rpx;
            }
        }
        .share-image{
            width:100%;
        }
    }

</style>
